<!doctype html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>线段编制的外摆线</title>
	<style>
		*{ margin: 0; padding: 0; }
		.root{ display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; }
		.root .center{ position: relative; width: 0; height: 0; }
		.root .center .line-wrap{
			position: absolute;
			transform-origin: 0 center;
			transform-style: preserve-3d;
			width: 200px;
			height: 10px;
			/*background: #00000055;*/
			border-radius: 10px;
		}
		.root .center .line-wrap .line{
			transform-origin: center;
			animation: rotate 5s linear infinite;
			position: absolute;
			left: -50px;
			width: 100%;
			height: 100%;
			background: rgba(255, 0, 0, .5);
			border-radius: 10px;
		}
		.root .center .line-wrap:nth-child(1){ transform: rotate(0deg); animation-delay: 0ms }
		.root .center .line-wrap:nth-child(2){ transform: rotate(30deg); animation-delay: 30ms }
		.root .center .line-wrap:nth-child(3){ transform: rotate(60deg); animation-delay: 60ms }
		.root .center .line-wrap:nth-child(4){ transform: rotate(90deg); animation-delay: 90ms }
		.root .center .line-wrap:nth-child(5){ transform: rotate(120deg); animation-delay: 120ms }
		.root .center .line-wrap:nth-child(6){ transform: rotate(150deg); animation-delay: 150ms }
		.root .center .line-wrap:nth-child(7){ transform: rotate(180deg); animation-delay: 180ms }
		.root .center .line-wrap:nth-child(8){ transform: rotate(210deg); animation-delay: 210ms }
		.root .center .line-wrap:nth-child(9){ transform: rotate(240deg); animation-delay: 240ms }
		.root .center .line-wrap:nth-child(10){ transform: rotate(270deg); animation-delay: 270ms }
		.root .center .line-wrap:nth-child(11){ transform: rotate(300deg); animation-delay: 300ms }
		.root .center .line-wrap:nth-child(12){ transform: rotate(330deg); animation-delay: 330ms }
		
		@keyframes rotate{
			0%{transform: rotate(0);left: -50px;}
			50%{transform: rotate(180deg);left: 50px;}
			100%{transform: rotate(360deg);left: -50px;}
		}
	</style>
</head>
<body>

<div class="root">
	<div class="center">
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
		<div class="line-wrap">
			<div class="line"></div>
		</div>
	</div>
</div>

</body>
</html>
